<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="发送状态" prop="sendStatus">
        <el-select
          v-model="queryParams.sendStatus"
          placeholder="请选择"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="(label, value) in SEND_STATUS_TEXT"
            :key="value"
            :label="label"
            :value="Number(value)"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="通知类型" prop="templateId">
        <el-select
          v-model="queryParams.templateId"
          placeholder="请选择"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="(label, value) in NOTIFY_TEMPLATE_TYPE_TEXT"
            :key="value"
            :label="label"
            :value="Number(value)"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="手机号"
          clearable
          @keyup.enter="handleQuery"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="发送时间" prop="sendTime">
        <el-date-picker
          v-model="queryParams.sendTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb3">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleSendNotify">发送通知</el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="notifyList"
    >
      <el-table-column
        label="通知标题"
        align="center"
        prop="title"
        min-width="180"
      />

      <el-table-column
        label="通知类型"
        align="center"
        prop="templateId"
        :formatter="notifyTypeFormatter"
      />

      <el-table-column
        label="用户类型"
        align="center"
        prop="userType"
        :formatter="recipientTypeFormatter"
      />

      <el-table-column label="接收人" align="center" prop="userName" />

      <el-table-column
        label="签收状态"
        align="center"
        prop="readFlag"
        :formatter="receiveStatusFormatter"
      />

      <el-table-column
        label="触发方式"
        align="center"
        prop="msgTrigger"
        :formatter="triggerMethodFormatter"
      />

      <el-table-column
        label="发送时间"
        align="center"
        prop="sendTime"
        width="120"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.sendTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="通知状态"
        align="center"
        prop="sendDesc"
      />

      <!-- <el-table-column label="通道" align="center" prop="channels">
        <template #default="scope">
          <span>{{ getNotifyChannelText(scope.row.channels) }}</span>
        </template>
      </el-table-column> -->

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="150"
      >
        <template #default="scope">
          <el-button link type="primary" @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button link type="primary" @click="handleResend(scope.row)"
            >重发</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 发送通知弹窗 -->
    <SendNotifyDialog
      v-model="sendNotifyDialogVisible"
      @confirm="handleSendNotifyConfirm"
    />

    <!-- 通知详情弹窗 -->
    <NotifyDetailDialog
      v-model="detailDialogVisible"
      :notify-id="currentNotifyId"
    />
  </div>
</template>

<script setup name="Notify">
import { listNotify, resendNotify, sendNotify } from "@/api/fang/notify";
import { parseTime } from "@/utils/ruoyi";
import SendNotifyDialog from "./components/SendNotifyDialog.vue";
import NotifyDetailDialog from "./components/NotifyDetailDialog.vue";
import {
  NOTIFY_STATUS_TEXT,
  NOTIFY_TEMPLATE_TYPE_TEXT,
  RECIPIENT_TYPE_TEXT,
  RECEIVE_STATUS_TEXT,
  TRIGGER_METHOD_TEXT,
  SEND_STATUS_TEXT,
} from "@/utils/enums";

const { proxy } = getCurrentInstance();

const notifyList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const sendNotifyDialogVisible = ref(false);
const detailDialogVisible = ref(false);
const currentNotifyId = ref(null);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sendStatus: null,
    templateId: null,
    phone: null,
    startSendTime: null,
    endSendTime: null,
    sendTime: null, // 用于日期选择器绑定
  },
});

const { queryParams } = toRefs(data);

// 格式化通知类型
function notifyTypeFormatter(row, column, cellValue) {
  return NOTIFY_TEMPLATE_TYPE_TEXT[cellValue] || "未知类型";
}

// 格式化接收人类型
function recipientTypeFormatter(row, column, cellValue) {
  return RECIPIENT_TYPE_TEXT[cellValue] || "未知";
}

// 格式化接收状态
function receiveStatusFormatter(row, column, cellValue) {
  return RECEIVE_STATUS_TEXT[cellValue] || "未知状态";
}

// 格式化触发方式
function triggerMethodFormatter(row, column, cellValue) {
  return TRIGGER_METHOD_TEXT[cellValue] || "未知";
}

// 格式化通知状态
function notifyStatusFormatter(row, column, cellValue) {
  return NOTIFY_STATUS_TEXT[cellValue] || "未知状态";
}

/** 查询通知列表 */
function getList() {
  loading.value = true;
  const params = { ...queryParams.value };
  // 处理时间范围
  if (
    params.sendTime &&
    Array.isArray(params.sendTime) &&
    params.sendTime.length === 2
  ) {
    params.startSendTime = params.sendTime[0];
    params.endSendTime = params.sendTime[1];
  }
  // 删除临时字段
  delete params.sendTime;
  // 过滤空值
  Object.keys(params).forEach(key => {
    if (params[key] === null || params[key] === undefined || params[key] === '') {
      delete params[key];
    }
  });
  listNotify(params)
    .then((response) => {
      if (response.code === 200) {
        notifyList.value = response.rows || [];
        total.value = response.total || 0;
      } else {
        proxy.$modal.msgError(response.msg || '查询失败');
        notifyList.value = [];
        total.value = 0;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 发送通知按钮操作 */
function handleSendNotify() {
  sendNotifyDialogVisible.value = true;
}

/** 发送通知确认 */
function handleSendNotifyConfirm(data) {
  sendNotify(data)
    .then(() => {
      proxy.$modal.msgSuccess("发送成功");
      getList();
    })
    .catch(() => {});
}

/** 查看按钮操作 */
function handleView(row) {
  currentNotifyId.value = row.id;
  detailDialogVisible.value = true;
}

/** 重发按钮操作 */
function handleResend(row) {
  proxy.$modal
    .confirm("是否确认重发该通知？")
    .then(() => {
      return resendNotify(row.id);
    })
    .then(() => {
      proxy.$modal.msgSuccess("重发成功");
      getList();
    })
    .catch(() => {});
}

getList();
</script>
